<template>
    <a-form ref='formRef' :label-col='{span : 5}' :model='formData'>
        <a-form-item style='display:none' name='id'>
            <a-input type='hidden' v-model:value='formData.id' />
        </a-form-item>
        <!-- <a-form-item label='分类' name='categoryId' :rules="[{required : true, message : '请选择分类'}]">
                <a-tree-select show-search v-model:value='formData.categoryId' :tree-data='categoryOptions' :field-names='{children : "children", label : "name", value : "id"}'></a-tree-select>
        </a-form-item> -->
        <a-form-item label='名称' name='name' showCount :maxlength="50" :rules="[{required : true, message : '请填写名称'}]">
            <a-input type='text' v-model:value='formData.name' show-count :maxlength="50"  />
        </a-form-item>
        <a-form-item label='图标' name='cover'>
            <a-upload list-type='picture-card' :max-count="1" v-model:file-list='coverList' :beforeUpload='beforeUpload' :customRequest='uploadCover' accept="image/png,image/jpeg,image/gif,image/webp">
                <template v-if='coverList.length == 0'>
                    <PlusOutlined />
                </template>
            </a-upload>
        </a-form-item>
        <template v-if="category.code == yiliaoCode">
            <a-form-item label='预约挂号链接' name='guahaolink' showCount :maxlength="50">
                <a-input type='text' v-model:value='formData.guahaolink' show-count :maxlength="50"  />
            </a-form-item>
            <a-form-item label='在线问诊链接' name='wenzhenlink' showCount :maxlength="50">
                <a-input type='text' v-model:value='formData.wenzhenlink' show-count :maxlength="50"  />
            </a-form-item>
        </template>
        <a-form-item label='内容' name='content'>
            <RichEditor v-model:excerpt="formData.excerpt" :excerpt-length="200" v-model="formData.content" :upload-api="uploadApi" />
        </a-form-item>
        <a-form-item label='前台显示' name='enable'>
            <a-switch v-model:checked='formData.enable' checked-children='显示' un-checked-children='不禁用'/>
        </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
    import { saveApi, categoryApi } from '@/api/Bianli';
        import { nextTick, ref } from 'vue';
import { useI18nStore } from '@/store/i18n';
import RichEditor from '@/components/RichEditor.vue'
import { uploadApi, uploadPicApi } from '@/api/Upload';
import { Modal } from 'ant-design-vue';

    const props = defineProps<{
        row? : any;
        category : any
    }>()

    const yiliaoCode = 'yiliao'

    const i18n = useI18nStore()

    const formRef = ref()

    const coverList = ref<any[]>([])

    

    
    const formData = ref<any>({
        id : 0,
        name : '',
        excerpt : '',
        content: '',
        sort : 1,
        enable : true,
        cover: '',

        guahaolink: '',
        wenzhenlink: '',
    })

    if(props.row) {
        for(let k in props.row) {
            if(k in formData.value) {
                formData.value[k] = props.row[k]
            }
        }


        if(props.category.code == yiliaoCode) {
            if(props.row.extra) {

                if(props.row.extra.guahaolink) {
                    formData.value.guahaolink = props.row.extra.guahaolink
                }

                if(props.row.extra.wenzhenlink) {
                    formData.value.wenzhenlink = props.row.extra.wenzhenlink
                }

            }
        }

        if(props.row.cover) {
            coverList.value[0] = {
                status : 'done',
                url : import.meta.env.B_NET_STATIC_URL + props.row.cover
            }
        }
        

    }

    function uploadCover(e) {
        if(e.file.size > 1024 * 1024 * 5) {
            Modal.error({
                title : '图片不能大于5M'
            })
            return
        }



        uploadApi(e.file).then(res => {
            coverList.value[0].status = 'done'
            coverList.value[0].url = import.meta.env.B_NET_STATIC_URL + res.data
            formData.value.cover = res.data

            formRef.value.validateFields(['cover'])
        })
    }

    function beforeUpload(file:File, field:FormField) {
        return true
    }


    async function submit() {
        let params  = await formRef.value.validate()
        if('sort' in params && params.sort === '') {
            params.sort = 1
        }

        params.categoryId = props.category.id

        params.excerpt = formData.value.excerpt

        if(props.category.code == yiliaoCode) {
            if(params.guahaolink || params.wenzhenlink) {
                params.extra = {
                    guahaolink : params.guahaolink,
                    wenzhenlink : params.wenzhenlink
                }
            }else {
                params.extra = null
            }
        }

        delete params.guahaolink
        delete params.wenzhenlink

        return saveApi(params)
    }

    //分类
    const categoryOptions = ref<any[]>([])


    // categoryApi().then(data => {
    //     if(data) {
    //         data.forEach(item => {
    //             item.name = i18n.t(item.name)
    //         })
    //         categoryOptions.value.push(...recursionFn(data, Math.min(...data.map(r => r.parentId)), 'id', 'parentId', 'children'))
    //     }
    // })

    defineExpose({
        submit
    })
</script>